import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'

const xData = [20, 30, 60, 40, 50, 30]
const yData = ['-1F', '1F', '2F', '3F', '4F', '5F']

const option = {
  backgroundColor: 'transparent',
  grid: {
    left: '5%',
    right: '2%',
    top: '10%',
    bottom: '15%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      type: 'category',

      boundaryGap: false,
      axisLabel: {
        // -1f文字颜色
        color: 'rgba(149, 175, 243, 1)'
      },
      axisLine: {
        show: true,
        lineStyle: {
          // x轴线颜色
          color: 'rgba(149, 175, 243, 1)',
          width: 1
        }
      },
      data: yData
    }
  ],
  yAxis: [
    {
      show: false,
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#0a2b52',
          width: 1,
          type: 'solid'
        }
      }
    }
  ],
  series: [
    {
      name: '',
      type: 'line',
      stack: '总量',
      symbol: 'circle',
      showSymbol: false,
      symbolSize: 8,
      itemStyle: {
        normal: {
          color: '#0092f6',
          lineStyle: {
            color: '#fff',
            width: 1
          },
          areaStyle: {
            // color: '#94C9EC'
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0.4,
                color: 'rgba(60, 70, 255, 0)'
              },
              {
                offset: 1,
                color: 'rgba(25, 125, 240, 1)'
              }
            ])
          }
        }
      },
      markPoint: {
        itemStyle: {
          normal: {
            color: 'red'
          }
        }
      },
      data: xData
    }
  ]
}

interface LikeOptions { xData: string[], yData: number[], sty?: { width: number, height: number } }

const Line = ({ xData, yData, sty = { width: 500, height: 300 } }: LikeOptions) => {
  const chartRef = useRef(null)

  useEffect(() => {
    // 1. 生成实例
    const myChart = echarts.init(chartRef.current)

    option.xAxis[0].data = xData
    option.series[0].data = yData

    // 3. 渲染参数
    myChart.setOption(option)
  }, [])

  return (
    <>
      <div className="like" style={sty} ref={chartRef}></div>
    </>
  )
}

export default Line